<script setup lang="ts">
import { Notification } from '@element-plus/icons-vue'
import { FormModal, SearchForm } from './components'
import { defaultFormData, defaultQuery } from './index'
import type {
  AuxiliaryInputRepairRecordParams,
  IndicatorInfo,
  TableColumn,
} from '@/types'
// ------------------use------------------
// #region
const { $message } = useCurrentInstance()
const { withLoading, loading } = useDefineLoading()
const [tableData, setTableData] = useState<IndicatorInfo[]>(
  [],
)
const [formData, setFormData]
  = useState<AuxiliaryInputRepairRecordParams>({
    ...defaultFormData,
  })
const [formModalTitle, setFormModalTitle]
  = useState<string>('')
// #endregion
// ------------------静态变量------------------
// #region
const columns: TableColumn<IndicatorInfo>[] = [
  {
    key: uuid(),
    type: 'index',
    width: '80',
    label: '序号',
  },
  {
    key: uuid(),
    label: '指标名称',
    prop: 'indicatorName',
  },
  {
    key: uuid(),
    label: '测点点位号',
    prop: 'indicatorCode',
  },
]
// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region
const modalRef = ref<InstanceType<typeof FormModal>>()
const query = ref({
  ...defaultQuery,
})
// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region
// #endregion
// ------------------生命周期------------------
// #region
// #endregion
// ------------------内置方法---------------------
// #region

// #endregion
// ------------------方法---------------------
// #region
async function showEditDialog(row: IndicatorInfo) {
  modalRef.value?.open()
  await nextTick()
  setFormModalTitle('补录')
  setFormData({
    ...defaultFormData,
    tagCode: row.indicatorCode,
  })
}
async function getTableData() {
  const { data: res } = await withLoading(
    indicatorApi.loadPointList,
  )(query.value.pointId, 0)
  setTableData(res)
}
function success() {
  getTableData()
  modalRef.value?.close()
  $message.success('保存成功！')
}

// #endregion
</script>

<template>
  <div
    class="padding-sm flex-direction flex align-end container"
  >
    <view-table
      :loading="loading"
      :columns="columns"
      :data="tableData"
    >
      <template #actions>
        <SearchForm
          v-model="query"
          @search="getTableData"
          @reset="setTableData([])"
        />
      </template>
      <template #operate="{ row }">
        <TdButton
          title="补录"
          :icon="Notification"
          type="primary"
          @click="showEditDialog(row)"
        />
      </template>
    </view-table>

    <FormModal
      ref="modalRef"
      v-model:data="formData"
      :title="formModalTitle"
      @success="success"
    />
  </div>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
